<template>
  <Form ref="personFrm" :model="userInfo" :rules="rules" @keydown.enter.native="handleSubmit">
    <FormItem label="昵称：" prop="manage_name">
      <Input v-model="userInfo.manage_name" placeholder="请输入用户名"></Input>
    </FormItem>
    <FormItem label="手机号：" prop="manage_phone">
      <Input v-model="userInfo.manage_phone" placeholder="请输入手机号"></Input>
    </FormItem>
    <FormItem label="密码：" prop="manage_pass">
      <Input v-model="manage_pass" placeholder="请输入密码" type="password"></Input>
    </FormItem>
     <FormItem v-if="isTeam" label="团队名称：" prop="team_name">
      <Input v-model="userInfo.team_name" placeholder="请输入密码"></Input>
    </FormItem>
    <FormItem label="上传头像：">
      <br>
      <div class="avator">
        <img :src="avatorImg">
      </div>
      <Upload
        type="drag"
        name="avatorFile"
        :action="upAvator.url"
        :headers="upAvator.headers"
        :show-upload-list="false"
        accept="image"
        :format="['jpg','jpeg','png','gif']"
        :max-size="20480"
        :before-upload="handleUploadBefore"
        :on-success="handleUploadSuccess"
        :on-format-error="handleUploadErr"
        :on-exceeded-size="handleUploadMaxSize">
        <div style="padding: 20px 0">
          <Icon type="ios-cloud-upload" size="52" style="color: #3399ff"></Icon>
          <p>点击或者将文件拖进来上传</p>
        </div>
      </Upload>
    </FormItem>
    <FormItem>
      <div style="width:80%;margin:0 auto;">
        <Button type="primary" :loading="submit" @click="handleSubmit" long>
          <span v-if="!submit">确定保存</span>
          <span v-else>保存中...</span>
        </Button>
      </div>
    </FormItem>
  </Form>
</template>

<style lang="less" scoped>
.avator {
  height: 126px;
  width: 126px;
  float: left;
  img {
    border-radius: 50px;
    margin: 0 auto;
    margin-top: 13px;
    height: 100px;
    width: 100px;
  }
}
</style>

<script>
import store from '@/store'
import config from '@/config'
import { jwtToken, getImage } from '@/libs/util'
import { getPerson } from '@/api/manage'
const baseUrl =
  process.env.NODE_ENV === 'development'
    ? config.baseUrl.dev
    : config.baseUrl.pro
export default {
  name: 'userInfo',
  props: {
    nameRules: {
      type: Array,
      default: () => {
        return [
          {
            required: true,
            message: '昵称不能为空',
            trigger: 'blur'
          }
        ]
      }
    },
    phoneRules: {
      type: Array,
      default: () => {
        return [
          {
            required: true,
            message: '手机号不能为空',
            trigger: 'blur'
          }
        ]
      }
    },
    passRules: {
      type: Array,
      default: () => {
        return [
          {
            required: true,
            message: '密码不能为空',
            trigger: 'blur'
          }
        ]
      }
    },
    teamNameRules: {
      type: Array,
      default: () => {
        return [
          {
            required: true,
            message: '请输入团队名称',
            trigger: 'blur'
          }
        ]
      }
    }
  },
  computed: {
    rules () {
      return {
        manage_name: this.nameRules,
        manage_phone: this.phoneRules,
        manage_pass: this.passRules,
        team_name: this.teamNameRules
      }
    }
  },
  data () {
    return {
      avatorImg: getImage('/static/upload/member/headimg/member.png'),
      manage_pass: '',
      userInfo: {
        manage_id: '',
        manage_name: '',
        manage_phone: '',
        team_name: '',
        avator: '/static/upload/member/headimg/member.png'
      },
      upAvator: {
        url: baseUrl + 'upload_avator',
        headers: {
          Authorization: ''
        }
      },
      isTeam: false,
      submit: false,
      disabled: false
    }
  },
  watch: {
    userInfo: {
      handler (val) {
        this.avatorImg = getImage(val.avator)
      },
      deep: true
    }
  },
  mounted: function () {
    this.getPerson()
  },
  methods: {
    getPerson () {
      getPerson().then(res => {
        const data = res.data
        if (data.code === 200) {
          this.userInfo = data.data
          if (data.data.team_name) {
            this.isTeam = true
          }
          this.disabled = true
        } else {
          this.$Message.error(data.error)
        }
      }).catch(err => {
        console.log(err)
        this.$Message.error('获取失败')
      })
    },
    handleSubmit () {
      this.$refs.personFrm.validate((valid) => {
        if (valid) {
          this.submit = true
          this.$emit('on-success-valid', {
            manage_name: this.userInfo.manage_name,
            manage_phone: this.userInfo.manage_phone,
            manage_pass: this.manage_pass,
            team_name: this.userInfo.team_name,
            avator: this.userInfo.avator
          })
        } else {
          this.submit = false
        }
      })
    },
    handleUploadSuccess (res, file, fileList) {
      if (res.code === 200) {
        this.userInfo.avator = res.data.avator
        this.$Notice.success({
          title: res.message
        })
      } else {
        this.$Notice.warning({
          title: res.error
        })
      }
    },
    handleUploadErr (file) {
      this.$Notice.warning({
        title: '文件格式不正确',
        desc: '请上传 PNG,JPGE,GIF 等图片格式'
      })
    },
    handleUploadMaxSize () {
      this.$Notice.warning({
        title: '文件大写不正确',
        desc: '上传的图片不能大于20M'
      })
    },
    handleUploadBefore () {
      this.upAvator.headers.Authorization = jwtToken()
      this.$Notice.success({
        title: '头像上传中...'
      })
    },
    success () {
      // 创建成功重新初始化
      store.dispatch('getUserInfo').then(res => {
        if (res.code === 200) {
          // 获取路由数据
          this.getPerson()
          this.manage_pass = ''
          this.submit = false
        } else {
          this.$Message.error(res.error)
          setToken('')
          next({
            name: 'login'
          })
        }
      }).catch(() => {
        setToken('')
        next({
          name: 'login'
        })
      })
    },
    fail () {
      this.getPerson()
      this.manage_pass = ''
      this.submit = false
    }
  }
}
</script>
